<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div class="aui-fullpage">
  <div class="aui-header-1">
    <lv-group lvGutter="8px">
      <h1>{{ 'system_backup_storage_unit_group_label' | i18n }}</h1>
    </lv-group>
  </div>

  <div class="aui-block aui-paginator-container custom-main-tab">
    <lv-tabs [(lvActiveIndex)]="activeIndex" lvType="card">
        <lv-tab
          lvTitle="{{ 'system_backup_storage_unit_group_label' | i18n }}"
          lvId="unitGroup"
        >
          <ng-template lv-tab-lazy>
            <div>
              <div class="aui-operation">
                <lv-group>
                  <lv-pro-button-group
                    [config]="optsConfig"
                    [bindData]="selectionData"
                  >
                  </lv-pro-button-group>
                </lv-group>
                <lv-group lvGutter="8px">
                  <lv-group lvGutter="8px">
                    <button
                      class="aui-button-icon"
                      lv-button
                      lvSize="auto"
                      (click)="dataTable.fetchData()"
                    >
                      <i lv-icon="lv-icon-refresh" [lvColorState]="true"></i>
                    </button>
                  </lv-group>
                </lv-group>
              </div>
              <lv-pro-table
                #dataTable
                [config]="tableConfig"
                [data]="tableData"
              >
              </lv-pro-table>
            </div>
          </ng-template>
        </lv-tab>
        <lv-tab
          lvTitle="{{ 'system_backup_storage_unit_label' | i18n }}"
          lvId="unit"
        >
          <ng-template lv-tab-lazy>
            <aui-backup-storage-unit></aui-backup-storage-unit>
          </ng-template>
        </lv-tab>

      <lv-tab
        lvTitle="{{ 'system_backup_storage_device_label' | i18n }}"
        lvId="device"
      >
        <ng-template lv-tab-lazy>
          <aui-backup-storage-device></aui-backup-storage-device>
        </ng-template>
      </lv-tab>
    </lv-tabs>
  </div>
</div>

<ng-template #deviceTypeTPl let-item>
  <span lv-overflow>{{item.deviceType | textMap: 'poolStorageDeviceType'}}</span>
</ng-template>

<ng-template #deviceTypeTPl let-item>
  <span lv-overflow>{{item.deviceType | textMap: 'poolStorageDeviceType'}}</span>
</ng-template>
